<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <link rel="stylesheet" href="./swiper-bundle.min.css">
    <script src="./swiper-bundle.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>

<body>

    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>页面标题</h1>
        </div>

        <!-- Swiper -->
        <div class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events">
            <div class="swiper-wrapper" id="swiper-wrapper-6477ee4c5c7419be" aria-live="polite"
                style="transition-duration: 0ms; transform: translate3d(-406px, 0px, 0px);">
                <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="8"
                    role="group" aria-label="9 / 9" style="width: 376px; margin-right: 30px;">Slide 9</div>
                <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" role="group"
                    aria-label="1 / 9" style="width: 376px; margin-right: 30px;"><img id="img1" src="https://img.alicdn.com/bao/uploaded/i1/O1CN01Yoc4Xw1ZagXifEFHo_!!6000000003211-0-alipicbeacon.jpg_300x300.jpg" alt=""></div>
                <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" role="group" aria-label="2 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img2" src="https://img.alicdn.com/bao/uploaded/i4/O1CN010hgqu821diOofkLq6_!!6000000007008-0-alipicbeacon.jpg_300x300.jpg" /></div>
                <div class="swiper-slide" data-swiper-slide-index="2" role="group" aria-label="3 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img3" src="https://img.alicdn.com/bao/uploaded/i3/O1CN01TBlkam1iqYoBrp98Q_!!6000000004464-0-alipicbeacon.jpg_160x240.jpg" /></div>
                <div class="swiper-slide" data-swiper-slide-index="3" role="group" aria-label="4 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img4" src="https://img.alicdn.com/bao/uploaded/i4/O1CN01ZIzc6j1pTO4xAbSZB_!!6000000005361-0-alipicbeacon.jpg_160x240.jpg" /></div>
                <div class="swiper-slide" data-swiper-slide-index="4" role="group" aria-label="5 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img5" src="https://img.alicdn.com/bao/uploaded/i4/O1CN01dBo4T…zN_!!6000000004672-0-alipicbeacon.jpg_300x300.jpg" alt=""></div>
                <div class="swiper-slide" data-swiper-slide-index="5" role="group" aria-label="6 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img6" src="https://img.alicdn.com/bao/uploaded/i4/O1CN01EOBHT…Ju_!!6000000007027-0-alipicbeacon.jpg_300x300.jpg" alt=""></div>
                <div class="swiper-slide" data-swiper-slide-index="6" role="group" aria-label="7 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img7" src="https://img.alicdn.com/bao/uploaded/i3/O1CN01TaEB5…8v_!!6000000008044-0-alipicbeacon.jpg_300x300.jpg" alt=""></div>
                <div class="swiper-slide" data-swiper-slide-index="7" role="group" aria-label="8 / 9"
                    style="width: 376px; margin-right: 30px;"><img id="img8" src="https://img.alicdn.com/bao/uploaded/i3/O1CN01rpxtH…zn_!!6000000001842-0-alipicbeacon.jpg_300x300.jpg" alt=""></div>
                <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="8" role="group"
                    aria-label="9 / 9" style="width: 376px; margin-right: 30px;"><img id="img9" src="https://img.alicdn.com/bao/uploaded/i2/O1CN01duNWi…ac_!!6000000000724-0-alipicbeacon.jpg_300x300.jpg" alt=""></div>
                <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
                    data-swiper-slide-index="0" role="group" aria-label="1 / 9"
                    style="width: 376px; margin-right: 30px;">Slide 1</div>
            </div>
            <!-- <div class="swiper-button-next" tabindex="0" role="button" aria-label="Next slide"
                aria-controls="swiper-wrapper-6477ee4c5c7419be"></div>
            <div class="swiper-button-prev" tabindex="0" role="button" aria-label="Previous slide"
                aria-controls="swiper-wrapper-6477ee4c5c7419be"></div> -->
            <!-- <div
                class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal">
                <span class="swiper-pagination-bullet swiper-pagination-bullet-active" tabindex="0" role="button"
                    aria-label="Go to slide 1" aria-current="true"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 2"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 3"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 4"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 5"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 6"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 7"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 8"></span><span class="swiper-pagination-bullet"
                    tabindex="0" role="button" aria-label="Go to slide 9"></span>
            </div> -->
            <span class="swiper-notification" aria-live="assertive" aria-atomic="true"></span>
        </div>


        <div data-role="content" id="maximum">

            <div id="big">
                <div class="Small" style="margin-left: 5px;">
                    <p class="large">21:10</p>
                    <p>23:17散场</p>
                </div>
                <div class="Small">
                    <p style="padding-top: 15px;">国语 3D</p>
                    <p style="padding-top: 10px;">2厅激光厅</p>
                </div>
                <div class="Sma">
                    <p class="large">新人价￥29.9</p>
                    <p>影城卡价 ￥26.9</p>
                </div>
                <div class="Small">
                    <button id="purchase"  onclick="fun()">购票</button>
                </div>
            </div>

            <div id="bik" style="display: none;">
                <div class="Small" style="margin-left: 5px;">
                    <p class="large">20:10</p>
                    <p>22:17散场</p>
                </div>
                <div class="Small">
                    <p style="padding-top: 15px;">国语 3D</p>
                    <p style="padding-top: 10px;">2厅激光厅</p>
                </div>
                <div class="Sma">
                    <p class="large">新人价￥26.9</p>
                    <p>影城卡价 ￥20.9</p>
                </div>
                <div class="Small">
                    <button id="purchase" onclick="fun()">购票</button>
                </div>
            </div>

        </div>

        <div data-role="footer">
            <h1>页面底部内容</h1>
        </div>
    </div>
</body>
<script>
    var swiper = new Swiper(".mySwiper", {
        slidesPerView: 1,
        spaceBetween: 30,
        loop: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });

    fun = function () {
                    window.location.href = './3页面.html'
                }
    $('#img1').click(function () {
        $('#big').show()
        $('#bik').hide()
    })
    $('#img2').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img3').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img4').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img5').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img6').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img7').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img8').click(function () {
        $('#big').hide()
        $('#bik').show()
    })
    $('#img9').click(function () {
        $('#big').hide()
        $('#bik').show()
    })

</script>
<style>
    html,
    body {
        position: relative;
        height: 100%;
    }

    body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
    }

    .swiper {
        width: 100%;
        height: 100%;
    }

    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
    }

    .swiper-slide img {
        display: block;
        width: 300;
        height: 100;
        object-fit: cover;
    }

    .swiper {
        margin-left: auto;
        margin-right: auto;
    }

    #maximum {
        width: 500px;
        height: 300px;
        background-color: darkgrey;
    }
    #bik,
    #big {
        width: 345px;
        height: 6.25rem;
        background-color: #fff;
    }

    .Small {
        width: 70px;
        height: 100px;
        font-size: 10px;
        float: left;
    }

    .Sma {
        width: 120px;
        height: 100px;
        font-size: 10px;
        float: left;
    }

    .large {
        font-size: 18px;
    }

    #purchase {
        width: 70px;
        height: 40px;
        background-color: #FF359A;
        color: #fff;
        margin-top: 2rem;
    }
</style>

</html>